<template>
  <div class="password-container">
    <a-card :title="t('user.password.title')" :bordered="false">
      <a-form
        :model="formState"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        @finish="handleSubmit"
      >
        <a-form-item
          :label="t('user.password.oldPassword')"
          name="oldPassword"
        >
          <a-input-password
            v-model:value="formState.oldPassword"
            :placeholder="t('user.password.oldPassword')"
          />
        </a-form-item>

        <a-form-item
          :label="t('user.password.newPassword')"
          name="newPassword"
        >
          <a-input-password
            v-model:value="formState.newPassword"
            :placeholder="t('user.password.newPassword')"
          />
        </a-form-item>

        <a-form-item
          :label="t('user.password.confirmPassword')"
          name="confirmPassword"
        >
          <a-input-password
            v-model:value="formState.confirmPassword"
            :placeholder="t('user.password.confirmPassword')"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 6 }">
          <a-space>
            <a-button type="primary" html-type="submit">
              {{ t('user.password.submit') }}
            </a-button>
            <a-button @click="handleReset">
              {{ t('user.password.cancel') }}
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const formState = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const rules = {
  oldPassword: [
    { required: true, message: t('user.password.oldPasswordRequired') }
  ],
  newPassword: [
    { required: true, message: t('user.password.newPasswordRequired') }
  ],
  confirmPassword: [
    { required: true, message: t('user.password.confirmPasswordRequired') },
    {
      validator: async (_rule: any, value: string) => {
        if (value !== formState.newPassword) {
          throw new Error(t('user.password.passwordNotMatch'))
        }
      }
    }
  ]
}

// 提交表单
const handleSubmit = async (values: any) => {
  try {
    // TODO: 调用修改密码的API
    message.success(t('user.password.success'))
    handleReset()
  } catch (error: any) {
    message.error(error.message || t('user.password.failed'))
  }
}

// 重置表单
const handleReset = () => {
  formState.oldPassword = ''
  formState.newPassword = ''
  formState.confirmPassword = ''
}
</script>

<style lang="less" scoped>
.password-container {
  padding: 24px;
}
</style> 